<template>
  <div class="SwipeLogin">
    <header :class="title">Welcome To Login</header>
    <el-form ref="loginFormRef" :model="loginForm" :rules="rules" style="width:350px;margin:auto;">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          prefix-icon="el-icon-lock"
          placeholder="密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <div class="touch">
          <div class="bg" ref="bg"></div>
          <div class="text" ref="text">
            <span class="nc">向右滑动验证</span>
          </div>
          <div class="btn" ref="btn"></div>
        </div>
        <div class="error" v-if="flag">请滑动验证</div>
      </el-form-item>
      <el-form-item>
        <el-button
          :type="active"
          style="width:100%;height:50px;margin-top:20px;"
          @click="toLogin"
        >即刻登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SwipeLogin",
  data() {
    const checkId = (rule, value, callback) => {
      if (value.trim() === "") {
        return callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    const checkPsd = (rule, value, callback) => {
      if (value.trim() === "") {
        return callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ validator: checkId, trigger: ["blur", "change"] }],
        password: [{ validator: checkPsd, trigger: ["blur", "change"] }]
      },
      success: false,
      flag: false
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.touch();
    });
  },
  methods: {
    // 滑动验证
    touch() {
      // 滑动成功的距离
      const distance = 300;

      const btn = this.$refs.btn;
      const bg = this.$refs.bg;
      const text = this.$refs.text;

      btn.onmousedown = e => {
        // 1.先清除 绑定过的过渡属性
        btn.style.transition = "";
        bg.style.transition = "";

        // 点击的水平位置
        const downX = e.clientX;
        // console.log(e);

        // 鼠标移动事件
        document.onmousemove = e => {
          // 鼠标移动后的水平位置
          const moveX = e.clientX;

          // 得到鼠标水平位置的偏移量
          let offsetX = moveX - downX;

          if (offsetX > distance) {
            offsetX = distance;
          } else if (offsetX < 0) {
            offsetX = 0;
          }

          btn.style.left = offsetX + "px";
          bg.style.width = offsetX + "px";

          if (offsetX === distance) {
            this.success = true;
            text.innerHTML = "验证通过";
            text.style.color = "#fff";
            btn.className = "btn el-icon-success";
            btn.style.color = "green";
            btn.style.background = "#fff";

            // 销毁事件
            btn.onmousedown = null;
            document.onmousemove = null;
          }
        };

        // 鼠标松开事件
        document.onmouseup = () => {
          // 如果鼠标松开滑动到了终点则验证通过
          if (this.success) {
            return;
          } else {
            // 反之，滑块复位（设置了1s的属性过渡效果）
            btn.style.left = 0;
            btn.style.transition = "left 1s ease";
            bg.style.width = 0;
            bg.style.transition = "width 1s ease";
            this.success = false;
          }

          //只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
    toLogin() {
      this.$refs.loginFormRef.validate(valid => {
        if (!this.success) {
          // 没有滑动验证
          this.flag = true;
          return;
        } else {
          // 滑动验证了
          this.flag = false;
          if (valid) {
            // 发送登录请求，--登录逻辑--
            this.$message.success("登录成功");
          } else {
            // 登录失败的逻辑
            this.$message.error("表单验证失败");
          }
        }
      });
    }
  },
  computed: {
    active() {
      return this.loginForm.username.trim().length &&
        this.loginForm.password.trim().length &&
        this.success
        ? "primary"
        : "info";
    },
    title() {
      return this.loginForm.username.trim().length &&
        this.loginForm.password.trim().length &&
        this.success
        ? "title2"
        : "title1";
    }
  }
};
</script>

<style lang='less' scoped>
.SwipeLogin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 430px;
  background: #fff;
  border-radius: 15px;
}
.title1 {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: #3b3c3e;
  margin-bottom: 60px;
  user-select: none;
}
.title2 {
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  color: #0bcc9a;
  margin-bottom: 60px;
  user-select: none;
}
.touch {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
}
.bg {
  width: 0;
  height: 100%;
  position: absolute;
  background: #16d9a6;
}
.text {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  user-select: none;
}
.nc {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, #4d4d4d),
    color-stop(0.4, #4d4d4d),
    color-stop(0.5, #fff),
    color-stop(0.6, #4d4d4d),
    color-stop(1, #4d4d4d)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: slidetounlock 3s infinite;
  -webkit-text-size-adjust: none;
}
.btn {
  position: absolute;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 28px;
  color: #0bcc9a !important;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  background: url("../assets/touch.png") no-repeat;
  background-position: center;
}
.error {
  position: absolute;
  color: #f56c6c;
  font-size: 12px;
  letter-spacing: 1px;
}
.color {
  color: pink;
}

@keyframes slidetounlock {
  0% {
    background-position: -300px 0;
  }
  100% {
    background-position: 300px 0;
  }
}
@-webkit-keyframes slidetounlock {
  0% {
    background-position: -300px 0;
  }

  100% {
    background-position: 300px 0;
  }
}
</style>
